<template>
  <el-table :data="fruitlist" style="width: 100%">
    <el-table-column fixed prop="fruitId" label="ID" width="150" />
    <el-table-column prop="fruitName" label="名称" width="150" />
    <el-table-column prop="affiliationField" label="所属领域" width="150" />
    <el-table-column prop="fruitInfo" label="成果描述" width="300" />
    <el-table-column prop="ethics" label="伦理考量" width="150" />
    <el-table-column prop="effect" label="社会影响" width="150" />
    <el-table-column prop="assess" label="风险评估" width="150" />
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="showupdate(scope.row)">更新</el-button>
        <el-button link type="primary" size="small" @click="del(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-button class="button" text @click="dialogVisibleadd = true" type="primary">添加</el-button>

  <!-- 添加对话框部分 -->
  <el-dialog v-model="dialogVisibleadd" title="科技成果添加" width="30%" :before-close="handleClose">
    <el-radio-group v-model="labelPosition" label="label position">
      <el-radio-button label="left">Left</el-radio-button>
      <el-radio-button label="right">Right</el-radio-button>
      <el-radio-button label="top">Top</el-radio-button>
    </el-radio-group>
    <div style="margin: 20px" />
    <el-form :label-position="labelPosition" label-width="100px" :model="addinfo" style="max-width: 460px">
      <el-form-item label="名称">
        <el-input v-model="addinfo.fruitName" placeholder="名称" clearable label-width="100px" />
      </el-form-item>
      <el-form-item label="所属领域">
        <el-input v-model="addinfo.affiliationField" placeholder="所属领域" clearable label-width="100px" />
      </el-form-item>
      <el-form-item label="成果描述">
        <el-input v-model="addinfo.fruitInfo" placeholder="成果描述" clearable />
      </el-form-item>
      <el-form-item label="伦理考量">
        <el-input v-model="addinfo.ethics" placeholder="伦理考量" clearable />
      </el-form-item>
      <el-form-item label="社会影响">
        <el-input v-model="addinfo.effect" placeholder="社会影响" clearable />
      </el-form-item>
      <el-form-item label="风险评估">
        <el-input v-model="addinfo.assess" placeholder="风险评估" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisibleadd = false">关闭</el-button>
        <el-button type="primary" @click="add"> 添加 </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 修改对话框部分 -->
  <el-dialog v-model="dialogVisible" title="科技成果修改" width="30%" :before-close="handleClose">
    <el-radio-group v-model="labelPosition" label="label position">
      <el-radio-button label="left">Left</el-radio-button>
      <el-radio-button label="right">Right</el-radio-button>
      <el-radio-button label="top">Top</el-radio-button>
    </el-radio-group>
    <div style="margin: 20px" />
    <el-form :label-position="labelPosition" label-width="100px" :model="updateinfo" style="max-width: 460px">
      <el-form-item label="名称">
        <el-input v-model="updateinfo.fruitName" placeholder="名称" clearable label-width="100px" />
      </el-form-item>
      <el-form-item label="所属领域">
        <el-input v-model="updateinfo.affiliationField" placeholder="所属领域" clearable label-width="100px" />
      </el-form-item>
      <el-form-item label="成果描述">
        <el-input v-model="updateinfo.fruitInfo" placeholder="成果描述" clearable />
      </el-form-item>
      <el-form-item label="伦理考量">
        <el-input v-model="updateinfo.ethics" placeholder="伦理考量" clearable />
      </el-form-item>
      <el-form-item label="社会影响">
        <el-input v-model="updateinfo.effect" placeholder="社会影响" clearable />
      </el-form-item>
      <el-form-item label="风险评估">
        <el-input v-model="updateinfo.assess" placeholder="风险评估" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="update"> 修改 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { TbFruit } from '../../ts/Fruit'
import { ElTable, ElTableColumn, ElButton, ElDialog, ElFormItem, ElInput, ElForm, ElRadioGroup, ElRadioButton, ElMessageBox } from 'element-plus'
import { L12001 } from '../../api/L12001'
import { BaseResult } from '../../ts/BaseResult'
import {Tools} from "../../ts/Tools"
const labelPosition = ref<FormProps['labelPosition']>('right')
const fruitlist = ref(new TbFruit())
const dialogVisibleadd = ref(false)
const dialogVisible = ref(false)
const queryinfo = ref({
  fruitName: '',
})
const addinfo = ref({
  fruitName: '',
  affiliationField: '',
  fruitInfo: '',
  ethics: '',
  effect: '',
  assess: '',
})
const updateinfo = ref({
  fruitId: 0,
  fruitName: '',
  affiliationField: '',
  fruitInfo: '',
  ethics: '',
  effect: '',
  assess: '',
})
const addqcinfo=ref({
  fruitName: '',
  affiliationField: '',
  fruitInfo: '',
  ethics: '',
  effect: '',
  assess: '',
})
function query() {
  L12001.post('/fruit/query', queryinfo.value, (data: BaseResult) => {
    if (data.success) {
      fruitlist.value = data.data
    }
  })
}
query()

function add() {
  L12001.post('/fruit/add', addinfo.value, (data: BaseResult) => {
    if (data.success) {
      ElMessageBox.alert(data.message)
      addinfo.value=addqcinfo.value
      dialogVisibleadd.value = false
      query()
    }
  })
}

function del(info: TbFruit) {
  ElMessageBox.confirm(`是否删除${info.fruitName}`, '删除科研成果').then(() => {
    const delinfo = ref({
      fruitId: info.fruitId,
    })
    L12001.post('/fruit/delete', delinfo.value, (data: BaseResult) => {
      if (data.success) {
        ElMessageBox.alert(data.message)
        query()
      }
    })
  })
}

function showupdate(info: TbFruit) {
  dialogVisible.value = true
  info=Tools.concatJson(info)
  updateinfo.value = info
}

function update() {
  L12001.post('/fruit/update', updateinfo.value, (data: BaseResult) => {
    if (data.success) {
      ElMessageBox.alert(data.message)
      dialogVisible.value = false
      query()
    }
  })
}
</script>

<style lang="scss" scoped></style>
